import AppPortal from "@/components/AppPortal"
import { offActions } from "@/store/offSlice"
import { useAppSelector, useAppDispatch } from "@/utils/hooks"
import styles from './styles.module.less'
import { useEffect, useState } from "react"
import SearchSuggestions from "@/components/SearchSuggestions"

const Search = () => {
  const {
    off: {
      searchTopSwitch
    },
  } = useAppSelector(state => state)
  const dispatch = useAppDispatch()

  const [searchValue, setSearchValue] = useState('');

  const init = () => {
    setSearchValue('')
  }

  useEffect(() => {
    init()
  }, [searchTopSwitch])

  return (
    <AppPortal
      visible={searchTopSwitch}
      position="top"
      onClose={() => {
        dispatch(offActions.update({
          searchTopSwitch: false
        }))
      }}>
      <div className={styles.Search}>
        <div className={styles.centent}>
          <div className={styles.inputSearch}>
            <input
              className={styles.input}
              aria-label="search"
              type="text"
              value={searchValue}
              onChange={(e) => {
                setSearchValue(e.target.value ?? '')
              }}
            />
          </div>
          <SearchSuggestions className="flex-1 overflow-auto" searchValue={searchValue} />
        </div>
      </div>
    </AppPortal>
  )
}

export default Search